<template>
  <div class="w-100%">
    <RecordForm
      v-permission="permissionKeys.add"
      :add-api="addRecord"
      @add="$table?.handleSearch"
    />
    <RecordList
      ref="$table"
      v-permission="permissionKeys.list"
      :get-data="getData"
      :edit-permission-key="permissionKeys.edit"
      :del-permission-key="permissionKeys.del"
      @edit="handleEdit"
      @delete="handleDelete"
    />
    <MyDrawer
      ref="$form"
      :model-form="model"
      :disabled="type === 'view'"
      :width="800"
      @submit="handleSubmit"
    >
      <n-form-item
        path="content"
        label="描述"
        label-placement="left"
        :rule="[{ required: true, message: '请输入描述！' }]"
      >
        <n-input
          v-model:value="model.content"
          type="textarea"
          :maxlength="500"
          show-count
          :autosize="{
            minRows: 5,
          }"
        />
      </n-form-item>
      <n-form-item path="refFileDtoList" label="附件" label-placement="left">
        <FileUpload v-model="model.refFileDtoList" />
      </n-form-item>
    </MyDrawer>
  </div>
</template>
<script setup lang="jsx">
import * as commonRecordApi from '@/api/record'
import RecordForm from './RecordForm.vue'
import RecordList from './RecordList.vue'
import { useCrudPro } from '@/hooks/useCrudPro'
defineOptions({ name: 'Record' })
const props = defineProps({
  apis: {
    type: Object,
    default: () => ({}),
  },
  id: {
    type: String,
    default: '',
  },
  permissionKeys: {
    type: Object,
    default: () => ({
      list: '',
      add: '',
      edit: '',
      del: '',
    }),
  },
})
function getData(params) {
  return props.apis.list({ ...params, associatedTableId: props.id })
}
function addRecord(params) {
  return props.apis.add({ ...params, associatedTableId: props.id })
}
const { type, model, $form, $table, handleEdit, handleSubmit, handleDelete } = useCrudPro({
  name: '记录',
  initForm: {
    id: null,
    content: '',
    refFileDtoList: [],
  },
  apis: {
    edit: commonRecordApi.edit,
    del: ({ id }) => commonRecordApi.del({ id }),
  },
})
</script>
<style lang="scss" scoped></style>
